import React from "react"
import * as ArcoIcon from "@arco-design/web-react/icon"
import ReactDOM from "react-dom"
const TipP=({children})=>{
    console.log(children)
    const target:any=document.querySelector('body')
    return ReactDOM.createPortal(
        children
    ,
        target
    )
}
export function Tips({
    duration=2000,
    type="common",
    content="提示内容",
    tip="问题描述"
}){
    /**
     * @param {common|error|success|warn} type 提示类型 
     */
     const divStyle:any={
        position:"absolute",
        right:"0px",
        backgroundColor:"var(--bg-2)",
        color:"white",
        top:"${(window.messageNumber || 0)*30+((window.messageNumber || 0)+1)*5}px",
        height:"auto",
        minHeight:"50px",
        lineHeight:"30px",
        textAlign:"center",
        borderRadius:"15px",
        paddingLeft:"8px",
        paddingRight:"8px",
        transform:"translateX(100%)",
        opacity:"0.5",
        transition:".2s",
        minWidth:"150px",
        zIndex:"10000000000"
    }
    let colorRef={
        common:'#3491FA',
        error:'#F53F3F',
        success:'#23C343',
        warn:'#FF7D00'
    }
    let div:any=document.createElement("div")
    document.body.appendChild(div)
    div.style.cssText=`
        position:absolute;
        right:16px;
        background-color:white;
        box-shadow:0 0 5px rgb(var(--gray-3));
        color:white;
        top:${(window['messageNumber'] || 0)*30+((window['messageNumber'] || 0)+1)*5+50}px;
        min-height:70px;
        height:auto;
        line-height:30px;
        text-align:center;
        border-radius:5px;
        padding-left:8px;
        padding-right:8px;
        transform:translateX(calc(100% + 16px));
        transition:.5s;
        min-width:250px;
        width:auto;
        opacity:0;
        z-index:10000000000
    `
    const typeComponent={
        'common':<ArcoIcon.IconBulb style={{fontSize:"24px",color:"rgb(var(--arcoblue-6))"}} ></ArcoIcon.IconBulb>,
        'warn':<ArcoIcon.IconExclamationCircle style={{fontSize:"24px",color:"rgb(var(--orange-6))"}}/>,
        'error':<ArcoIcon.IconClose style={{fontSize:"24px",color:"rgb(var(--red-6))"}}/>,
        'success':<ArcoIcon.IconCheck style={{fontSize:"24px",color:"rgb(var(--green-6))"}}/>,
    }
    let child=<div style={{
        width:'100%',
        display:'flex'
    }}>
        {typeComponent[type]}
        <div style={{width:'100%',height:'auto',textAlign:'left'}}>
            <div style={{color:"var(--colorText-1)",marginTop:"8px"}}>
                {content}
            </div>
            <div style={{color:"var(--colorText-2)",marginTop:"8px",fontSize:'14px'}}>
                {tip}
            </div>
        </div>
        
    </div>
    setTimeout(() => {
        div.style.transform="translateX(0)"
        div.style.opacity="1"
    }, 70);
    
    setTimeout(()=>{
        div.style.transform="translateX(calc(100% + 16px))"
        setTimeout(()=>{
            div.remove()
            div=null
        },600)
        
    },duration+100)
    ReactDOM.render(child,div)
}